@{
ViewData["Title"] = "添加采购单";
}
<fieldset class="layui-elem-field layui-col-md8 layui-col-md-offset2 " style="margin-top:10px;">
	<legend>添加采购单</legend>
	<div class="layui-field-box">
		<form class="layui-form" action="">
			<div class="layui-form-item">

				<label class="layui-form-label">供应商</label>
				<div class="layui-input-inline" style="width:190px;">
					<select name="supplierName" id="supplierName" lay-verify="required" lay-filter="aihao">
						<option value=""></option>
					</select>
				</div>
				<div class="layui-btn-container">
					<button type="button" class="layui-btn layui-btn-primary" lay-on="page">添加供应商</button>
				</div>

			</div>
			<div class="layui-form-item">

				<label class="layui-form-label">采购物品</label>
				<div class="layui-input-inline" style="width:190px;">
					<select name="goodsName" id="goodsName" lay-verify="required" lay-filter="aihao">
						<option value=""></option>
					</select>
				</div>
				<div class="layui-btn-container">
					<button type="button" class="layui-btn layui-btn-primary" lay-on="page2">添加物品</button>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">单号</label>
				<div class="layui-input-inline layui-input-wrap">
					<input type="text" name="id" autocomplete="off" lay-affix="clear" class="layui-input" disabled>
				</div>
				<label class="layui-form-label">单据日期</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" lay-verify="required" name="datetime"
						id="ID-laydate-type-datetime-1" placeholder="yyyy-MM-dd HH:mm:ss">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">采购数量</label>
				<div class="layui-input-inline layui-input-wrap">
					<input type="number" id="amount" name="amount" lay-verify="required" autocomplete="off"
						lay-affix="clear" class="layui-input">
				</div>
				<label class="layui-form-label">采购单价</label>
				<div class="layui-input-inline layui-input-wrap">
					<input type="number" id="price" name="price" lay-verify="required" autocomplete="off"
						lay-affix="clear" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<i class="layui-icon layui-icon-rmb layui-font-red layui-font-14"></i>
					单据金额
				</label>
				<div class="layui-input-inline layui-input-wrap">
					<input type="text" id="money" name="money" autocomplete="off" lay-affix="clear" class="layui-input"
						disabled>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</fieldset>


@section Scripts {
<script>
	$(function() {
		layui.use(['form', 'laydate', 'util'], function() {
			var form = layui.form;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var util = layui.util;


			// 提交事件
			form.on('submit(demo1)', function(data) {
				var field = data.field;
				$.ajax('/api/PurchaseOrder/Add', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					data: JSON.stringify(field),
					success: function(result) {
						layer.msg('添加采购订单成功');
						setTimeout(function() {
							location.reload();
						}, 1000);
					},
					error: function(err) {
						console.log(err);
					}
				})
				return false; // 阻止默认 form 跳转
			});

			// 日期
			laydate.render({
				elem: '#ID-laydate-type-datetime-1',
				type: 'datetime',
				fullPanel: true // 2.8+
			});


			//获取供应商信息
			const apiUrl = "/api/Supplier/AllName";
			$.ajax({
				url: apiUrl,
				method: 'GET',
				dataType: 'json',
				success: function(data) {
					// 动态渲染选项
					$.each(data, function(index, supplier) {
						$('#supplierName').append(
							$('<option>', {
								value: supplier, // 设置选项的值
								text: supplier // 设置选项的显示文本
							})
						);
					});
					// 重新渲染表单
					form.render('select');
				},
				error: function(error) {
					console.error('获取数据失败:', error);
				}
			});

			//获得物品数据
			const apiUrl2 = "/api/Goods/AllName";
			$.ajax({
				url: apiUrl2,
				method: 'GET',
				dataType: 'json',
				success: function(data) {
					// 动态渲染选项
					$.each(data, function(index, goods) {
						$('#goodsName').append(
							$('<option>', {
								value: goods, // 设置选项的值
								text: goods // 设置选项的显示文本
							})
						);
					});
					// 重新渲染表单
					form.render('select');
				},
				error: function(error) {
					console.error('获取数据失败:', error);
				}
			});

			//弹出添加供应商、物品窗口
			util.on('lay-on', {
				page: function() {
					// 页面层
					layer.open({
						type: 1,
						title: '添加供应商',
						area: ['400px', '400px'], // 宽高
						content: `<div class="layui-padding-4"><form class="layui-form">
          <div class="demo-login-container">
            <div class="layui-form-item">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-fonts-i"></i>
                </div>
                <input type="int" name="id" value="" placeholder="供应商Id"  autocomplete="off" class="layui-input" lay-affix="clear" disabled>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="name" value="" lay-verify="required" placeholder="供应商名称" lay-reqtext="请填写供应商名称" autocomplete="off" class="layui-input" lay-affix="clear">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-location"></i>
                </div>
                <input type="text" name="address" value="" lay-verify="required" placeholder="供应商地址" lay-reqtext="请填写供应商地址" autocomplete="off" class="layui-input" lay-affix="clear">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-cellphone-fine"></i>
                </div>
                <input type="text" name="phoneNumber" value="" lay-verify="required" placeholder="联系电话" lay-reqtext="请填写联系电话" autocomplete="off" class="layui-input" lay-affix="clear">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="add-supplier">添加</button>
            </div>
            
          </div>
        </form></div>`
					});
				},
				page2: function() {
					// 页面层
					layer.open({
						type: 1,
						title: '添加物品',
						area: ['400px', '350px'], // 宽高
						content: `<div class="layui-padding-4"><form class="layui-form">
          <div class="demo-login-container">
            <div class="layui-form-item">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-fonts-i"></i>
                </div>
                <input type="int" name="id" value="" placeholder="物品Id"  autocomplete="off" class="layui-input" lay-affix="clear" disabled>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="name" value="" lay-verify="required" placeholder="物品名称" lay-reqtext="请填写物品名称" autocomplete="off" class="layui-input" lay-affix="clear">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-note"></i>
                </div>
                <input type="text" name="specification" value="" lay-verify="required" placeholder="物品规格：KG/件/箱" lay-reqtext="请填写物品规格" autocomplete="off" class="layui-input" lay-affix="clear">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="add-goods">添加</button>
            </div>

          </div>
        </form></div>`
					});
				},
			});
			// 添加供应商
			form.on('submit(add-supplier)', function(data) {
				var field = data.field;
				field.id = 0;
				$.ajax('/api/Supplier/Add', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					data: JSON.stringify(field),
					success: function(result) {
						layer.msg('添加供应商成功');
						setTimeout(function() {
							location.reload();
						}, 1000);
					},
					error: function(err) {
						console.log(err);
					}
				})
				return false;
			});
			//添加物品
			form.on('submit(add-goods)', function(data) {
				var field = data.field;
				field.id = 0;
				$.ajax('/api/Goods/Add', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					data: JSON.stringify(field),
					success: function(result) {
						layer.msg('添加物品成功');
						setTimeout(function() {
							location.reload();
						}, 1000);
					},
					error: function(err) {
						console.log(err);
					}
				})
				return false;
			});
		});
	});


	//监听单价、数量输入框以计算金额
	const amount = document.getElementById('amount');
	const price = document.getElementById('price');
	const money = document.getElementById('money');
	//添加输入事件
	amount.addEventListener('input', calculateAmount);
	price.addEventListener('input', calculateAmount);
	//计算金额
	function calculateAmount() {
		const a = parseFloat(amount.value);
		const b = parseFloat(price.value);
		const c = a * b;
		money.value = c.toFixed(2);
	}
</script>
}